<template>
  <div class="tims-navbar">
    <div class="tims-navbar-menus">
      <el-menu :default-active="activeMenu2" router class="tims-navbar-menu" mode="horizontal">
        <el-menu-item style="width: 100px;" index="classroomList">班级报名</el-menu-item>
        <el-menu-item index="courseList">精品课程</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const activeMenu2 = ref(route.meta.activeMenu2); // 反应当前路由

watch(route, (to) => {
  activeMenu2.value = to.meta.activeMenu2; // 监听路由变化，更新activeMenu2
});

</script>

<style lang="scss" scoped>
.tims-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  // background-color: red;

  max-width: 1520px;
  margin: 0 auto;

  .tims-navbar-menus {
    display: flex;
    align-items: center;
    height: 60px;

    .el-menu-item {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20px;
      color: #222222;
      line-height: 28px;
      text-align: center;
      width: 42px;
      text-align: left;
      margin-right: 25px;
    }
  }

  .tims-navbar-menu {
    // margin-left: 18px;
    width: 600px;
    border: none;

    .el-menu-item {
      font-size: 16px;
      font-weight: 500;
      background-color: transparent !important;
      transition: none;
      border: none;
      line-height: 60px;
    }
  }
}
</style>